App.require(function () {
    var app = App.getCurrent();

    app.defineComponent("str-chip", {
        getDomObj: function () {
            this.attachDom("#after", "afterIcon")
                .attachDom("[role='chip']", "container")
                .attachDom("span", "slotContainer")
                .attachEvent("container", "click", this.clickHandler, false)
                .attachEvent("container", "iconclick", this.iconClickHandler, false)
                .attachEvent("container", "change", this.changeHandler, false);

            if (this.domList.afterIcon) {
                this.attachEvent("afterIcon", "iconclick", this.iconAfterClickHandler, false);
            }
        },
        changeHandler: function (ev) {
            this.property.checked = ev.target.checked;
            this.dispatchCustomEvent("chipchange", { component: this, event: ev, target: ev.target });
        },
        clickHandler: function (ev) {
            if (!this.property.type) {
                this.dispatchCustomEvent("chipclick", { component: this, event: ev, target: ev.target });
            }
            this.data.clickIcon = false;
        },
        iconClickHandler: function (ev) {
            var component = ev.detail.component;
            if (component.property.id = "after") {
                var event = ev.detail.event;
                event.preventDefault();
                event.stopPropagation();
                this.dispatchCustomEvent("chipafterclick", { component: this, originComponent: ev.detail.component, target: ev.target });
            }
        },
        render: function (next) {
            this.computeData();
            this.fetch("index.html", function (text) {
                return next(this.renderHTML(text));
            })
        },
        computeData: function () {
            var property = this.property;
            if (property.type) {
                property.name = property.name || this.uid;
            }
            property.class = property.class || "ripple";
            property.checked = typeof property.checked === "undefined" ? "" : "checked";
            if (property.beforetype && property.beforetext) {
                property.location = "before";
            }
            if (property.aftertype && property.aftertext) property.location = "after";
            this.data.uid = this.uid;
            this.data.propertystr = this.createPropertyStr({
                class: property.class
            });
        },
        changeSlotContent: function (str) {
            var slot = this.getSlotByName("default");
            slot.content = str;
            this.domList.slotContainer.textContent = "str";
        },
        set beforeObj(value) {
            var type = value.type, text = value.text, that = this;
            if (type == this.property.beforetype && text == this.property.beforetext) return;
            var container = this.domList.container, span = this.domList.slotContainer;
            if (this.property.beforetype && this.property.beforetext) {
                if (this.property.type) container = container.querySelector("label");
                var range = document.createRange();
                range.setStart(container, 0);
                range.setEndBefore(span);
                this.deleteRange(range);
                range.detach();
            }

            if (type && text) {
                var html = "";
                if (type == "icon") html = '<str-icon class="chip-prev-icon" icon="' + text + '" width="18" height="18" nofocus></str-icon>';
                else if (type == "avatar") html = '<img src="' + text + '" alt="chipimg"/>';

                this.insertAdjacentHTML(span, html, "beforebegin", function () {
                    that.property.beforetype = type;
                    that.property.beforetext = text;
                })
            }
        },
        get beforeObj() {
            return {
                type: this.property.beforetype,
                text: this.property.beforetext
            }
        },
        set afterObj(value) {
            var type = value.type, text = value.text, that = this;
            if (type == this.property.aftertype && text == this.property.aftertext) return;
            if (type && text) {
                if (this.property.aftertype && this.property.aftertext) {
                    var components = this.components, len = components.length;
                    components[len - 1].icon = text;
                    this.property.aftertype = type;
                    this.property.aftertext = text;
                }
                else {
                    var html = '<str-icon class="chip-next-icon" icon="' + text + '" id="after" width="18" height="18" nofocus></str-icon>';
                    var container = this.domList.container;
                    if (this.property.type) container = container.querySelector("label");
                    this.insertAdjacentHTML(container, html, "beforeend", function () {
                        that.property.aftertype = type;
                        that.property.aftertext = text;
                    })
                }
            }
            else {
                if (this.property.aftertype && this.property.aftertext) {
                    var components = this.components, len = components.length;
                    this.removeComponent(components[len - 1]);
                }
            }
        },
        get afterObj() {
            return {
                type: this.property.aftertype,
                text: this.property.aftertext
            }
        },
        get checked() {
            return this.property.checked;
        },
        set checked(value) {
            value = value ? "checked" : "";
            if (!this.property.type || value === this.property.checked) return;
            if (value) this.domList.container.querySelector("input").setAttribute("checked", "checked");
            else this.domList.container.querySelector("input").removeAttribute("checked");
            this.property.checked = value;
        },
        set name(value) {
            if (!this.property.type || value === this.property.name) return;
            this.domList.container.querySelector("input").name = value;
            this.property.name = value;
        },
        get name() {
            return this.property.name;
        },
        set type(value) {
            if (value == this.property.type) return;
            var range = document.createRange(), 
                container = this.domList.container;
                
            if (this.property.type) {
                var input = container.querySelector("input"),
                    label = tcontainer.querySelector("label");
                if (value) {
                    input.type = value;
                }
                else {
                    range.selectNodeContents(label);
                    container.appendChild(range);
                    container.removeChild(label);
                    container.removeChild(input);
                }
            }
            else {
                range.selectNodeContents(container);
                var label = document.createElement("label");
                label.htmlFor = this.uid;
                range.surroundContents(label);
                var input = document.createElement("input");
                input.type = value;
                input.name = this.property.name;
                input.id = this.uid;
                container.insertBefore(input, label);
            }
            this.property.value = value;
            range.detach();
            range = null;
        },
        get className() {
            return this.property.class;
        },
        set className(value) {
            if (this.property.class == value) return;
            this.property.class = value;
            this.domList.container.className = value;
        },
        get type() {
            return this.property.type;
        }
    });
});